<template>
	<div class='olMap'>
		<h2>{{this.name}}</h2>
		<div class='map'  ref='rootmap'></div>
	</div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import mapconfig from '../../../js/mapconfig'

export default {
	name: 'HomeMap',
	data () {
		return {
			name: '地图展示',
			map: null
		}
	},
	mounted () {
		var mapcontainer = this.$refs.rootmap
	    this.map = new Map({
	      target: mapcontainer,
	      layers: mapconfig.streetmap(),
	      view: new View({
	        projection: 'EPSG:4326',    
	        center: [mapconfig.x, mapconfig.y], 
	        zoom: mapconfig.zoom
	      })
	    })
	}
}

</script>

<style lang='stylus'>
	.olMap
		width: 100%
		.map
			height: 100%
			.ol-attribution
				display: none
			.ol-zoom 
				font-size: 12px
</style>	
